﻿<template>
  <view class="splash-container">
    <view class="splash-content">
      <image class="logo" src="/static/fishPiLogo.png" mode="aspectFit"></image>
      <text class="app-name">摸鱼派</text>
      <text class="app-slogan">鱼油的专属社区</text>
      
      <!-- 加载动画 -->
      <view class="loading-container">
        <view class="loading-dots">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
        <text class="loading-text">{{ loadingText }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { isLoggedIn } from "@/api/request";

const loadingText = ref("正在启动...");

// 检查登录状态并跳转
const checkLoginAndRedirect = () => {
  // 模拟启动时间，避免闪烁
  setTimeout(() => {
    if (isLoggedIn()) {
      console.log("用户已登录，跳转到首页");
      loadingText.value = "正在进入首页...";
      
      // 再延迟一点时间让用户看到加载状态
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/index/index"
        });
      }, 500);
    } else {
      console.log("用户未登录，跳转到登录页");
      loadingText.value = "正在进入登录页...";
      
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/login/login"
        });
      }, 500);
    }
  }, 1000); // 至少显示1秒启动页
};

onMounted(() => {
  checkLoginAndRedirect();
});
</script>

<style lang="scss">
.splash-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #121212;
  background-image: radial-gradient(circle at 15% 50%,
      rgba(36, 36, 36, 0.5) 0%,
      transparent 20%),
    radial-gradient(circle at 85% 30%,
      rgba(36, 36, 36, 0.5) 0%,
      transparent 20%);
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
  animation: logoFloat 2s ease-in-out infinite;
}

.app-name {
  font-size: 60rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease-out;
}

.app-slogan {
  font-size: 32rpx;
  color: #f0d35e;
  letter-spacing: 2rpx;
  margin-bottom: 80rpx;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 1s ease-out 0.6s both;
}

.loading-dots {
  display: flex;
  gap: 12rpx;
  margin-bottom: 30rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #f0d35e;
  border-radius: 50%;
  animation: dotBounce 1.4s ease-in-out infinite both;
  
  &:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  &:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  &:nth-child(3) {
    animation-delay: 0s;
  }
}

.loading-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Menlo", "Monaco", monospace;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10rpx);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style>
